<template>
    <div class="container committee-container">
        <system-nav :name="isEdit ? '编辑组织关系' : '添加组织关系'" :showBack="true"></system-nav>
        <div class="inner"> 
            <div class="system-form">
                <Form ref="form" :model="form" :rules="ruleValidate" :label-width="120" :hide-required-mark="true">
                    <FormItem prop="deptName" label="组织全称">
                        <Input v-model="form.deptName" type="text" class="common-input" clearable placeholder="请输入组织全称" />
                    </FormItem>
                    <FormItem label="组织级别">
                        <Select v-model="form.level" class="common-input" :disabled="userLevel >= 2" @on-change="handleLevelChange" placeholder="请选择组织级别">
                            <Option v-for="item in levelList" :value="item.value" :key="item.value">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="上级单位">
                        <Select v-model="form.fid" :disabled="userLevel >= 2 || form.level <= 2" class="common-input" placeholder="请选择上级单位">
                            <Option v-for="item in fdeptList" :value="item.id" :key="item.id">{{ item.deptName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem prop="clerkName" label="书记">
                        <Input v-model="form.clerkName" type="text" class="common-input" clearable placeholder="请输入书记姓名" />
                    </FormItem>
                    <FormItem prop="userName" label="登录名">
                        <Input v-model="form.userName" type="text" class="common-input" clearable placeholder="请输入登录名" />
                    </FormItem>
                    <FormItem prop="pwd" label="密码">
                        <Input v-model="form.pwd" type="password" class="common-input" clearable autocomplete="new-password" placeholder="请输入密码" />
                    </FormItem>
                    <FormItem prop="confirmPwd" label="确认密码">
                        <Input v-model="form.confirmPwd" type="password" class="common-input" clearable placeholder="请确认密码" />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" class="margin-right-25" @click="handleSubmit('form')">提交</Button>
                        <Button type="primary" @click="goBack" ghost>返回</Button>
                    </FormItem>
                </Form>
            </div>
        </div>              
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SystemNav from '@/components/SystemNav'
import mixin from '@/mixins'
import { addPartyRest, getParentListRest, getPartyRest, editPartyRest } from '@/common/apis/system'
import { committeeLevelList } from '@/common/utils/const'

export default {
    name: 'committeeAddEdit',
    mixins: [mixin],
    components: {
        SystemNav
    },
    data() {
        const validatePass = (rule, value, callback) => {
            if(value) {
                if (this.form.pwd !== '') {
                    this.$refs.form.validateField('confirmPwd')
                } 
                callback()
            }
        }
        const validatePassCheck = (rule, value, callback) => {
            if (value && value !== this.form.pwd) {
                callback(new Error('确认密码与密码不一致'))
            } else {
                callback()
            }
        }
        return {
            isEdit: false,
            levelList: committeeLevelList,
            userLevel: 2,
            fdeptList: [],
            form: {
                deptName: '',
                level: 0,
                fid: -1,
                clerkName: '',
                userName: '',
                pwd: '',
                confirmPwd: ''
            },
            ruleValidate: {
                deptName: [
                    { required: true, message: '组织全称不能为空', trigger: 'blur' }
                ],
                level: [
                    { required: true, message: '组织级别不能为空', trigger: 'change' }
                ],
                fid: [
                    { required: true, message: '上级单位不能为空', trigger: 'blur' }
                ],
                clerkName: [
                    { required: true, message: '书记姓名不能为空', trigger: 'blur' }
                ],
                userName: [
                    { required: true, message: '登录名不能为空', trigger: 'blur' }
                ],
                pwd: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                confirmPwd: [
                    { required: true, message: '确认密码不能为空', trigger: 'blur' },
                    { validator: validatePassCheck, trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            this.id = this.$route.params.id
            this.isEdit = this.id !== undefined
            this.userLevel = this.userInfo.department.level
            this.levelList = this.levelList.filter(item => this.userLevel < item.value)
            if (this.isEdit) {
                this.getParty()
            } else {
                this.form.level = this.levelList[0].value
                this.handleLevelChange(this.form.level)
            }
        },
        getParty() {
            getPartyRest(this.id).then(result => {
                this.committee = result.data.content
                this.handleLevelChange(this.committee.level, this.committee.fid)
                const { deptName, level, fid, clerkName } = this.committee

                this.form = {
                    deptName,
                    level,
                    fid,
                    clerkName
                }
            })
        },
        handleLevelChange(val, fid) {
            if (val !== 1) {
                getParentListRest(val).then(result => {
                    this.fdeptList = result.data.content
                    if(!fid) {
                        this.form.fid = this.fdeptList[0].id
                    }
                })
            } else {
                this.fdeptList = []
                this.form.fid = ''
            }
        },
        handleSubmit(name) {
            const THIS = this
            this.$refs[name].validate(valid => {
                if (valid) {
                    let params = {
                        ...this.form,
                        fid: this.form.level === 1 ? -1 : this.form.fid
                    }
                    
                    if (this.isEdit) {
                        params.id = this.committee.id,
                        editPartyRest(params).then(result => {
                            if (result.data.code === 200) {
                                THIS.$Message.success({
                                    background: true,
                                    content: '编辑成功'
                                })
                            } else {
                                THIS.$Message.error({
                                    background: true,
                                    content: '编辑失败'
                                })
                            }
                            this.goBack()
                        })
                    } else {
                        addPartyRest(params).then(result => {
                            if (result.data.code === 200) {
                                this.$Message.success({
                                    background: true,
                                    content: '添加成功'
                                })
                            } else {
                                this.$Message.error({
                                    background: true,
                                    content: '添加失败'
                                })
                            }
                            this.goBack()
                        })
                    }
                }
            })
        }
    }
}
</script>